window.onload=function(){	
	var btn=document.getElementsByClassName("close")[0];
	var div=document.getElementById("top");
	btn.onclick=function(){
		div.style.display="none";
	}
	var city=document.getElementsByClassName("city")[0];
	var city1=document.getElementsByClassName("city1")[0];
	var btn=document.getElementById("btn");
	city.onmouseover=function(){
		city1.style.display="block";
		city1.style.backgroundColor="white";
	}
	city.onmouseout=function(){
		city1.style.display="none";

	}
	btn.onclick=function(){
		city1.style.display="none";
	}

	var li1=document.getElementsByClassName("li1")[0];
	var my1=document.getElementsByClassName("my1")[0];
	li1.onmouseover=function(){
		my1.style.display="block";
		li1.style.background="white";
	}
	li1.onmouseout=function(){
		my1.style.display="none";
		li1.style.background="";
	}
	var li2=document.getElementsByClassName("li2")[0];
	var dh=document.getElementsByClassName("dh")[0];
	li2.onmouseover=function(){
		dh.style.display="block";
		li2.style.background="white";
	};
	li2.onmouseout=function(){
		dh.style.display="none";
		li2.style.background="";
	};
};
	/*--------------------------------------放大镜----------------------------------------------*/
	window.onload = function () {
    var oBox = document.getElementById("glass");
    var leftBox = document.createElement('div');
    var topMask = document.createElement('div');
    topMask.style.cssText = "position: absolute;z-index:999;opcaty:0;width:100%;height:100%;cursor:crosshair;"
    leftBox.style.cssText= "    position: absolute;height: 330px;width: 330px;"
    var rightBox = document.createElement('div');
    rightBox.className ="rightBox"
    leftBox.className ="leftBox"
    var mask = document.createElement('div');
    mask.className="mask";
    var oImg = document.createElement('img');
    var maxImg = document.createElement('img');
    maxImg.src = "http://p02.sfbest.com/2016/1800250107/original_w_1800250107_1_11.jpg";
    maxImg.className = "maxImg"
    oImg.style.cssText = "position: absolute;"
    oImg.src = "http://p02.sfbest.com/2016/1800250107/middle_w_1800250107_1_11.jpg"
    leftBox.appendChild(oImg)
    leftBox.appendChild(topMask)
    rightBox.appendChild(maxImg)
    leftBox.appendChild(mask)
    oBox.appendChild(leftBox);
    oBox.appendChild(rightBox);
    topMask.onmousemove = function (e) {
        var e = e||window.event;
        posX = e.offsetX-mask.offsetWidth/2;
        posY = e.offsetY-mask.offsetHeight/2;
        if(posX<0){
            posX = 0 ;
        }
        if (posY<0){
            posY=0
        }

        //console.log(topMask.offsetWidth-mask.offsetWidth);
        if(posX>topMask.offsetWidth-mask.offsetWidth){
            posX = topMask.offsetWidth-mask.offsetWidth ;
            //console.log(posX)
        }
        if (posY>topMask.offsetHeight-mask.offsetHeight){
            posY=topMask.offsetHeight-mask.offsetHeight
        }

        mask.style.cssText = "top:"+posY+"px;left:"+posX+"px;"
        rightBox.style.display="block";
        maxImg.style.cssText = "left:"+(-posX*2.42)+"px;top:"+(-posY*2.42)+"px;";
    }
    topMask.onmouseout =function () {
        rightBox.style.display ="none"
    }
 }



		



